<template>
	<!-- <h2>用户列表</h2> -->
	<div class="box">
		<!-- 表头 -->
		<TitleView></TitleView>
		<el-card class="box-card">
			<!-- 表格 -->
			<div style="margin-top: 15px;" class="search">
				<el-input placeholder="请输入内容" class="input-with-select" v-model="form.username">
					<el-button slot="append" icon="el-icon-search"  @click="handleSearch()"></el-button>
				</el-input>
				<el-button type="primary" class="add" @click="dialogFormVisible = true">添加用户</el-button>
			</div>
			<!-- 弹层 -->
			<!-- 对话框弹层 -->
			<el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="550px">
				<el-form :model="form" :rules="rules" ref="form" >
					<el-form-item label="账号" :label-width="formLabelWidth" prop="username">
						<el-input v-model="form.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth" prop="password">
						<el-input v-model="form.password" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
						<el-input v-model="form.email" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="手机号" :label-width="formLabelWidth" prop="mobile">
						<el-input v-model="form.mobile" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addFn();resetForm();submitForm('form')">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 表格 -->
			<TableCom :list="list" @fn="getTableData()" :addFlag="addFlag"></TableCom>
    	</el-card>
	</div>
</template>

<script>
import TitleView from './TitleView.vue';
import TableCom from './TableCom.vue';

	// 验证邮箱的规则
	let checkEmail = (rule, value, callback) => {
		let regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
		if (!regEmail.test(value)) {
		return callback(new Error('请输入合法的邮箱'));
		}
		callback();
	};

	// 验证手机号的规则
	let checkMobile = (rule, value, callback) => {
		let regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (!regMobile.test(value)) {
			return callback(new Error('请输入合法的手机号'));
		}
		callback();
	};
export default {
    name: "AddProductView",
    components: { TitleView,TableCom },
    data(){
      return {
        list:[],
        addFlag:false,
		params:{
			pagenum:1,
			pagesize:10
		},
        form: {
			username: "",
			password: "",
			email: "",
			mobile: ""
		},
		formLabelWidth: '100px',
		dialogFormVisible: false,
		rules: {
			username: [
				{ required: true, message: '请输入活动名称', trigger: 'blur' },
				{ min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' }
			],
			password: [
				{ required: true, message: '请输入活动名称', trigger: 'blur' },
				{ min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
			],
			email: [
				{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
				{validator: checkEmail, message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
			],
			mobile: [
				{ required: true, message: '请输入手机号', trigger: 'blur' },
				{ validator: checkMobile,message: '请输入正确的手机号', trigger: ['blur', 'change']}
			]
		}
      }
    },
	methods:{
		init(){
			this.addFn()
			// 数据初始化
			this.getTableData();
		},
		addFn(){
			this.$http.postuser(this.form);
			// this.$store.dispatch("getLIst",this.form)
			// console.log(this.form)
			this.getTableData();
		},
		async getTableData(){
			//发送Ajax请求
            let res = await this.$http.getsyan(this.params)
			this.list = res.data.data.users;
            // console.log(this.list)  
			// console.log(res.data.data)  
			this.dialogFormVisible = false
		},
		// 重置
		resetForm(){
			this.form = {
				username: "",
				password: "",
				email: "",
				phone: ""
			};
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					alert('submit!');
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleSearch(){
			this.bus.$emit('search',this.form);
			console.log(this.form);
		}
	},
	created(){
		this.$nextTick(() => {
			this.init();
		})
	},
	
}
</script>

<style lang="scss" scoped>
.search{
    display: flex;
    margin-bottom:20px; 
}
.el-input{
    width: 400px
}
.add{
    margin-left: 10px;
}
.box-card{
	margin-top: 10px;
	margin-left: 20px;
}
</style>